<template>
  <div class="page-list">
    <template v-if="type === 'lesson'">
      <exam-card v-for="item in arr1" :key="item.url" :data="item" @click="toPage(item)" />
    </template>
    <template v-else>
      <block-card v-for="item in arr2" :key="item.type" :title="item.title">
        <exam-card v-for="child in item.children" :key="child.value" :data="child" @click="toGamePage(child.value)" />
      </block-card>
    </template>
  </div>
</template>

<script>
import Taro from '@tarojs/taro'
import ExamCard from '../exam/components/ExamCard.vue'
import BlockCard from '../home/components/BlockCard.vue'

export default {
  components: {
    ExamCard,
    BlockCard
  },
  data() {
    return {
      type: '',
      arr1: [
        { name: '艺术课堂', url: 'lesson', icon: 'font' },
        { name: '交流互动', url: 'moment', icon: 'chat' }
      ],
      arr2: [
        {
          title: '记忆训练',
          type: 'memory',
          children: [
            { name: '纸牌记忆', value: 'memory/card' },
            { name: '数字记忆', value: 'memory/number' }
          ]
        },
        {
          title: '执行训练',
          type: 'execution',
          children: [
            { name: '字与色违', value: 'execution/color' },
            { name: '走迷宫', value: 'execution/maze' }
          ]
        },
        {
          title: '空间训练',
          type: 'space',
          children: [
            { name: '盖塔楼', value: 'space/tower' },
            { name: '俄罗斯方块', value: 'space/tetris' }
          ]
        },
        {
          title: '注意力训练',
          type: 'focus',
          children: [
            { name: '注意力训练', value: 'focus' }
          ]
        }
      ]
    }
  },
  computed: {

  },
  onLoad(options) {
    console.log(options)
    this.type = options.type
    Taro.setNavigationBarTitle(options)
  },
  methods: {
    toGamePage(main) {
      if (main === 'focus') {
        this.toPage({
          url: 'knowledge',
          title: '注意力训练',
          type: 3
        })
        return
      }
      Taro.navigateTo({
        url: `/pages/game/${main}/index`
      })
    },
    toPage(item, id, type) {
      let query = ''
      if (id) {
        query = `id=${id}&type=${type}`
      }
      if (typeof item === 'string') {
        item = { url: item }
      } else if (item.type) {
        query = 'type=' + item.type + '&title=' + item.title
      }
      Taro.navigateTo({
        url: `/pages/${item.url}/index?${query}`
      })
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
